<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>登录注册</title>

		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
		<style>
			label{
				color: red;
			}
			.box {
				margin: 0 auto;
				position: absolute;
				left: 50%;
				top: 50%;
				height: 420px;
				width: 300px;
				margin-left: -150px;
				margin-top: -210px;
				border: 1px solid #ccc;
				background-color: #fff;
				border-radius: 25px;
				display: none;
				z-index: 2;
			}

			.top-s {
				font-size: 12px;
				color: #ccc;
				display: block;
				text-align: center;
				margin-left: 25px;
				margin-top: 25px;
				margin-bottom: 5px;
			}

			.top-x {
				font-size: 18px;
				color: black;
				display: block;
				text-align: center;
				margin-bottom: 45px;
			}

			.cuo {
				float: right;
				margin-right: 10px;
				margin-top: 5px;
				cursor: pointer;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<script type="text/javascript">
			$(function(){
				//用户名框失去焦点事件
				$("#userName").blur(function () {
					if($("#userName").val()==""){
						$("#userNameL").html("用户名不能为空")
					}else{
						$("#userNameL").html("")
					}
				})
				//密码
				$("#userPwd").blur(function(){
					if($("#userPwd").val().trim().length>=6 && $("#userPwd").val().trim().indexOf(" ")==-1){
						$("#userPwdL").html("");
					}else{
						$("#userPwdL").html("密码格式不正确");
					}
				});
				//确认密码
				$("#userRePwd").blur(function(){
					var upwd=$("#userPwd").val();
					var urepwd=$("#userRePwd").val();
					if(upwd==urepwd){
						$("#userRePwdL").html("");
					}else{
						$("#userRePwdL").html("密码不一致");
					}
				});
				//身份证框失去焦点事件
				$("#userRealID").blur(function () {
					if($("#userRealID").val().trim()==""){
						$("#userRealIDL").html("身份证不能为空")
					}else{
						$("#userRealIDL").html("")
					}
				})
				//电话框失去焦点事件
				$("#userTel").blur(function () {
					if($("#userTel").val()==""){
						$("#userTelL").html("联系电话不能为空")
					}else{
						$("#userTelL").html("")
					}
				})
				//登录框事件
				//用户名框失去焦点事件
				$("#LuserName").blur(function () {
					if($("#LuserName").val()==""){
						$("#LuserNameL").html("用户名错误")
					}else{
						$("#LuserNameL").html("")
					}
				})
				//密码
				$("#LuserPwd").blur(function(){
					if($("#LuserPwd").val().trim()!=null){
						$("#LuserPwdL").html("");
					}else{
						$("#LuserPwdL").html("密码不正确");
					}
				});
			});
		</script>
	</head>
	<body>
	<div class="box">
		<img src="${pageContext.request.contextPath}/img/cw.png" class="cuo" >
		<span class="top-s">身份验证</span>
		<span class="top-x">拖动滑块，使图片角度为正</span>
		<div id="rotateWrap1">
			<div class="rotateverify-contaniner">
				<div class="rotate-can-wrap">
					<canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
					<div class="statusBg status-bg"></div>
				</div>
				<div class="control-wrap slideDragWrap">
					<div class="control-tips">
						<p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
					</div>
					<div class="control-bor-wrap controlBorWrap"></div>
					<div class="control-btn slideDragBtn">
						<i class="control-btn-ico"></i>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="main">
			<div class="container a-container" id="a-container">
				<form class="form" id="a-form" name="registForm" method="post" action="${pageContext.request.contextPath}/userInfoController/register"
				enctype="multipart/form-data">
					<h2 class="form_title title">会员注册</h2>
					<input class="form__input" type="file" id="userImg" name="userfile">
					<input class="form__input" type="text" id="userName" name="userName" placeholder="用户名">
					<label id="userNameL"></label>
					<input class="form__input" type="password" id="userPwd" name="userPwd" placeholder="密码">
					<label id="userPwdL"></label>
					<input class="form__input" type="password" id="userRePwd" name="userRePwd" placeholder="确认密码">
					<label id="userRePwdL"></label>
					<input class="form__input" type="text" id="userReName" name="userRealName" placeholder="真实姓名">
					<label id="userReNameL"></label>
					<input class="form__input" type="text" id="userTel" name="userTel" placeholder="联系电话">
					<label id="userTelL"></label>
					<input class="form__input" type="text" id="userRealID" name="userRealID" placeholder="身份证号码">
					<label id="userRealIDL"></label>
					<%--<button class="form__button button">注册</button>--%>
					<input id="regist" class="form__button button btn" onclick="return false;" type="submit" value="注册">
				</form>
			</div>
			<div class="container b-container" id="b-container">
				<form class="form" id="b-form" name="loginForm" method="post" action="${pageContext.request.contextPath}/userInfoController/login">
					<h2 class="form_title title">会员登录</h2>
					<input class="form__input" type="text" id="LuserName" name="LuserName" placeholder="用户名">
					<label id="LuserNameL"></label>
					<input class="form__input" type="password" id="LuserPwd" name="LuserPwd" placeholder="密码">
					<label id="LuserPwdL"></label>
					<a class="form__link" href="#">忘记密码?</a>
					<button id="login" class="form__button button btn" onclick="return false;" type="submit">登录</button>
				</form>
			</div>
			<div class="switch" id="switch-cnt">
				<div class="switch__circle"></div>
				<div class="switch__circle switch__circle--t"></div>
				<div class="switch__container" id="switch-c1">
					<h2 class="switch__title title">Welcome Back !</h2>
					<p class="switch__description description">登录你的信息和我们保持联系</p>
					<button class="switch__button button switch-btn">登录</button>
				</div>
				<div class="switch__container is-hidden" id="switch-c2">
					<h2 class="switch__title title">Hello Friend !</h2>
					<p class="switch__description description">填入你的详细信息加入我们</p>
					<button class="switch__button button switch-btn">注册</button>
				</div>
			</div>
		</div>
		<script src="${pageContext.request.contextPath}/js/scripts.js"></script>
	</body>
	<script src="${pageContext.request.contextPath}/js/yz.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 加一个div全部 然后设置display：block；
		// 点击按钮
		// 加一个div全部 然后设置display：block；
		$(function () {
			$("#login").click(function () {
				var myRotateVerify = new RotateVerify('#rotateWrap1', {
					initText: '滑动将图片转正',//默认
					slideImage: ['${pageContext.request.contextPath}/img/1.png', '${pageContext.request.contextPath}/img/2.png','${pageContext.request.contextPath}/img/3.png', '${pageContext.request.contextPath}/img/4.png', '${pageContext.request.contextPath}/img/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
					slideAreaNum: 10,// 误差范围角度 +- 10(默认)
					getSuccessState: function (res) {//验证通过 返回  true;
						// console.log('例1' + res);
						if(res){
								document.loginForm.submit();
						}else{ return false;}
					}
				})
			})
			$("#regist").click(function () {
				var myRotateVerify = new RotateVerify('#rotateWrap1', {
					initText: '滑动将图片转正',//默认
					slideImage: ['${pageContext.request.contextPath}/img/1.png', '${pageContext.request.contextPath}/img/2.png','${pageContext.request.contextPath}/img/3.png', '${pageContext.request.contextPath}/img/4.png', '${pageContext.request.contextPath}/img/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
					slideAreaNum: 10,// 误差范围角度 +- 10(默认)
					getSuccessState: function (res) {//验证通过 返回  true;
						// console.log('例1' + res);
						if(res){
							document.registForm.submit();
						}else{ return false;}
					}
				})
			})
			// 点击按钮
			$(".btn").click(function () {
				$(".box").css("display", "block");
				$("body").css({ "background": "#807878" });
				$(".btn").attr("disabled", true);
			})
			//    点击x
			$(".cuo").click(function () {
				$(".box").css("display", "none");
				$("body").css("background", "#fff");
				$(".btn").attr("disabled", false);
			})
			//1

		})

	</script>
</html>